<template>
  <div class="p-anslysis">
    <div class="top">
      <div class="left">项目分析</div>
      <div class="right">
        <statisticalTimeTemp @changeTimeVal="changeTimeVal" :cutTime="cutTime"></statisticalTimeTemp>
      </div>
    </div>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <div class="col-body">
          <ProjectTitle name="产业类型统计" project @changeTabName="changeTabName1"></ProjectTitle>
          <div ref="chart1" :style="{ height: `${chartH}px` }" class="chart1"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="col-body">
          <ProjectTitle name="项目来源统计" project @changeTabName="changeTabName2"></ProjectTitle>
          <div ref="chart2" :style="{ height: `${chartH}px` }" class="chart2"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="col-body">
          <ProjectTitle name="企业类型统计" project @changeTabName="changeTabName3"></ProjectTitle>
          <div class="chart3-select">
            <el-select v-model="selectValue" placeholder="请选择" size="small" @change="changeSelect">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div ref="chart3" :style="{ height: `${chartH}px` }" class="chart3"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="col-body">
          <ProjectTitle name="投资额区间统计" project @changeTabName="changeTabName4"></ProjectTitle>
          <div ref="chart4" :style="{ height: `${chartH}px` }" class="chart4"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ProjectTitle from './common/projectTitle.vue';
import statisticalTimeTemp from './common/statisticalTimeTemp.vue';
import { projectAnalysisData } from '@api/projectManaApi';
import { chartOption1, chartOption2, chartOption3, chartOption4, colors } from './chartConfig/index';

export default {
  components: { ProjectTitle, statisticalTimeTemp },
  data() {
    return {
      countTime: '',
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      chartH: 0,
      district: '太原市',
      selectValue: '',
      options: [],
      cutTime: '2023年1-7月',
      curType1: '投资额占比',
      curType2: '投资额占比',
      curType3: '投资额占比',
      curType4: '投资额占比'
    };
  },
  created() {
    this.initSize();
  },
  mounted() {
    this.initData1();
    this.initData2();
    this.initData3();
    this.initData4();
    window.addEventListener('resize', () => {
      this.initSize();
      this.chart1.resize();
      this.chart2.resize();
      this.chart3.resize();
      this.chart4.resize();
    });
  },
  // 销毁监听
  beforeDestroy() {

  },
  methods: {
    changeTabName1(name) {
      this.curType1 = name;
      this.initData1()
    },
    changeTabName2(name) {
      this.curType2 = name;
      this.initData2()
    },
    changeTabName3(name) {
      this.curType3 = name;
      this.initData3()
    },
    changeTabName4(name) {
      this.curType4 = name;
      this.initData4()
    },
    changeSelect(val) {
      console.log(val);
    },
    changeTimeVal(val) {
      this.cutTime = val;
      this.initData1();
      this.initData2();
      this.initData3();
      this.initData4();
    },
    initSize() {
      const clientH = document.body.clientHeight;
      this.chartH = (clientH - 440) / 2;
    },
    async initData1() {
      const res = await projectAnalysisData({
        projectType: "产业类型统计",
        timePeriod: this.cutTime,
        type: this.curType1
      });
      if (res.length > 0 && res[0].objectType.length > 0) {
        const option = { ...chartOption1 };
        option.series[0].data = []
        option.yAxis.data = []
        res[0].objectType.forEach((item) => {
          option.yAxis.data.push(item.projectProfession);
          const obj = {
            value: this.curType1 === "投资额占比" ? item.percentage : item.count,
            label: {
              formatter: function (params) {
                return `${params.value}%\n${item.count}个`
              }
            }
          };
          option.series[0].data.push(obj);
        });
        this.initChart1(option);
      }
    },
    async initData2() {
      const res = await projectAnalysisData({
        projectType: "项目来源统计",
        timePeriod: this.cutTime,
        type: this.curType2
      });
      if (res.length > 0 && res[0].objectType.length > 0) {
        const option = Object.assign({}, chartOption2);
        option.series[0].data = []
        res[0].objectType.forEach((item, index) => {
          const obj = {
            value: this.curType2 === "投资额占比" ? item.percent : item.count,
            name: item.location,
            itemStyle: {
              color: colors[index],
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              formatter: function (params) {
                return `${params.value}%\n${item.count}个`
              }
            }
          }
          option.series[0].data.push(obj);
        });
        this.initChart2(option);
      }
      console.log(res, '2')
    },
    async initData3() {
      const res = await projectAnalysisData({
        projectType: "企业类型统计",
        timePeriod: this.cutTime,
        type: this.curType3
      });
      if (res.length > 0 && res[0].objectType.length > 0) {
        const option = { ...chartOption3 }
        option.series[0].data = []
        res[0].objectType.forEach((item, index) => {
          const obj = {
            value: this.curType3 === "投资额占比" ? item.percent : item.count,
            name: item.enterpriseType,
            itemStyle: {
              color: colors[index],
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              formatter: function (params) {
                return `${params.value}%\n${item.count}个`
              }
            }
          };
          option.series[0].data.push(obj);
        });
        this.initChart3(option);
      }
    },
    async initData4() {
      const res = await projectAnalysisData({
        projectType: "企业类型统计",
        timePeriod: this.cutTime,
        type: this.curType4
      });
      if (res.length > 0 && res[0].objectType.length > 0) {
        const option = { ...chartOption4 };
        option.series[0].data = []
        res[0].objectType.forEach((item, index) => {
          const obj = {
            value: this.curType4 === "投资额占比" ? item.percent : item.count,
            label: {
              formatter: function (params) {
                return `${params.value}%\n${item.count}个`
              }
            }
          };
          option.series[0].data.push(obj);
        });
        this.initChart4(option);
      }
    },
    initChart1(option) {
      this.chart1 = this.$echarts.init(this.$refs.chart1);
      this.chart1.setOption(option);
    },
    initChart2(option) {
      this.chart2 = this.$echarts.init(this.$refs.chart2);
      this.chart2.setOption(option);
    },
    initChart3(option) {
      this.chart3 = this.$echarts.init(this.$refs.chart3);
      this.chart3.setOption(option);
    },
    initChart4(option) {
      this.chart4 = this.$echarts.init(this.$refs.chart4);
      this.chart4.setOption(option);
    }
  }
};
</script>

<style scoped lang="less">
.p-anslysis {
  .top {
    display: flex;
    justify-content: space-between;
    height: 50px;
    align-items: center;
    box-shadow: 0 4px 4px 1px rgba(0, 0, 0, 0.05);
    padding: 0 20px;

    .left {
      color: #0063F7;
      border-bottom: 3px solid #0063F7;
      font-weight: bold;
      height: 100%;
      font-size: 18px;
    }

    .right {
      display: flex;
      align-items: center;
      margin-top: -15px;
    }
  }
}

.col-body {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #DDDDDD;
  margin-bottom: 20px;
  position: relative;

  .chart3-select {
    position: absolute;
    right: 10px;
    top: 70px;
    z-index: 99;
  }
}
</style>
